<template>
  <div>
      <div class="save"><div class="save-btn" @click="saveBlog">保存</div></div>
      <div class="blog_title">
        <div class="label_title">标题</div>
        <div class="input_label">
          <input type="text" v-model="blog.articleTitle" placeholder="请输入文章标题">
        </div>
      </div>
      <div class="blog_image">
        <div class="label_title">图片</div>
        <div class="input_label">
          <input type="text" v-model="blog.articleImageurl" placeholder="图片地址">
        </div>
      </div>
      <div class="blog_describe">
        <textarea style="resize: none" v-model="blog.articleDescription" placeholder="博客描述"></textarea>
      </div>
      <v-md-editor
          class="md_editor"
          v-model="blog.articleContent" autofocus
          :disabled-menus="[]"
          @upload-image="handleUploadImage"
          left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save emoji">
      </v-md-editor>
  </div>
  <CategoryAndTag :blog="blog" :isupdate="isupdate" v-if="isShow" @cancel="cancel"/>
</template>

<script>
import axios from "axios";
import {request} from "../../../axios";
import CategoryAndTag from "./CategoryAndTag";

export default {
  name: "BlogEdit",
  components:{CategoryAndTag},
  data(){
    return{
      isShow:false,
      isupdate:false,
      blog:{
        articleId:0,
        articleTitle:'',
        articleContent:'',
        articleDescription:'',
        articleImageurl:'',
        articleLikeCount:0,
        articleViews:0,
        articleStatus:0,
        tags:[],
        category:null,
      }
    }
  },
  mounted() {
    if(this.$route.params.blog!=null){
      this.isupdate = true;
      this.blog = JSON.parse(this.$route.params.blog);
    }
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
     let formdate =  new FormData()
      formdate.append("file",files[0])
      let axiosInstance = axios.create();
       axiosInstance.post('/backend/saveimage', formdate, {
         headers:{'Content-Type':'multipart/form-data'}
       }).then(res => {
         insertImage({
           url:'http://www.prblog.top:90/images/blogimg/'+res.data.imagePath,
           desc: files[0].name,
           width: 'auto',
           height: 'auto',
         });
       })

    },
    saveBlog(){
      if(this.blog.articleContent==''||this.blog.articleTitle==''){
        return
      }
      this.isShow = true;
    },
    cancel(){
      this.isShow = false;
    }
  }
}
</script>

<style scoped>
.save{
  overflow: auto;
  width: 100%;
}
.blog_title,.blog_image{
  display: flex;
  margin-bottom: 1px;
}
.input_label{
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.input_label >input{
  height: 100%;
}
.label_title{
  display: inline-block;
  width: 5%;
  line-height: 40px;
  text-align: center;
  border: 1px solid #03e9f4;
  background-color: #1abc9c;
  box-shadow: 0 0 5px #03e9f4;
}
.blog_describe textarea{
  outline: none;
  width: 100%;
  height: 100px;
  border: 1px solid #ffff00;
  box-sizing: border-box;
  padding: 0 5px;
}
input{
  outline: none;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ffff00;
}
.blog_describe{

}
.md_editor{
  height: 600px;
}

.save-btn{
  float: right;
  width: 55px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 0 5px #ffff00;
  border: 1px solid #41a8a5;
  background-color: #dddddd;
  border-radius: 3px;
  cursor: pointer;
}
.save-btn:hover{
  box-shadow: 0 0 5px #000000;
}
input:focus{
  border-color: #41a8a5;
}
</style>